<!--
 * @Author: yanjikun
 * @Date: 2022-01-05 11:35:16
 * @LastEditors: yanjikun
 * @LastEditTime: 2022-05-26 13:56:42
 * @Description: file content
-->
<template>
  <Spin size="large" :spinning="loading">
    <div class="login-box">
      <div class="login-form-box"></div>
      <div class="login-word animate__animated animate__fadeInLeft">
        <p class="login-word-top">{{ basicInfo.shortName }}</p>
        <div class="login-word-center">
          <p class="login-word-system_name">{{ basicInfo.platform }}</p>
          <p class="login-word-system_slogan">{{ basicInfo.slogan }}</p>
        </div>
        <p class="login-word-footer">
          {{ basicInfo.technicalSupport }}
          <br />
          <a href="https://beian.miit.gov.cn/#/Integrated/index" target="blank" class="text-white">
            {{ basicInfo.icp }}
          </a>
        </p>
      </div>
      <div class="login-form">
        <Tabs v-model:activeKey="activeKey">
          <Tabs.TabPane key="1" tab="用户登录">
            <LoginForm></LoginForm>
          </Tabs.TabPane>
        </Tabs>
      </div>
    </div>
  </Spin>
</template>

<script setup lang="ts">
  import { Tabs, Spin } from 'ant-design-vue'
  import LoginForm from './LoginForm.vue'
  import { computed, ref } from 'vue'
  import { useProjectStore } from '@/store/modules/projectConfig'
  const projectStore = useProjectStore()
  const activeKey = ref('1')
  const loading = projectStore.initBasicInfo()
  const basicInfo = computed(() => projectStore.basicInfo)
</script>

<style scoped lang="less">
  .ant-spin-nested-loading {
    @apply h-full;

    :deep(.ant-spin-container) {
      @apply h-full;
    }

    :deep(.ant-spin) {
      @apply absolute inset-0 m-auto;
    }
  }

  .login-box {
    @apply h-full w-full relative overflow-hidden bg-no-repeat;
    background-image: url('@/assets/img/login/login.png');
    background-size: 100% 100%;

    .login-form-box {
      @apply w-1400px h-1400px rounded-full bg-white absolute left-65/100 z-10;
      top: calc(50% - 700px);
    }

    .login-word {
      @apply h-full flex flex-col justify-between py-10px w-880px absolute left-11/100 text-white z-10 text-center;

      &-top {
        @apply font-black mt-30px;
        font-family: 'Archivo Black';
        font-size: 31.7px;
      }

      &-system_slogan {
        @apply mt-30px;
        font-size: 17px;
      }

      &-system_name {
        @apply font-black;
        font-size: 56.2px;
      }
    }

    .login-form {
      --animate-duration: 3s;
      @apply w-400px absolute right-6/100 z-100;
      top: calc(50% - 154px);
    }
  }
</style>
